<script setup>
import { onMounted, ref } from 'vue'
import { queryAllApi, saveDeptApi, queryByIdApi, updateDeptApi, deleteByIdApi } from '@/api/dept'
import { ElMessage } from 'element-plus'

const tableData = ref([])

// 对话框
const add = () => {
  titles.value = '新增部门'
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }
  dialogFormVisible.value = true
}
const titles = ref('新增部门')
const dialogFormVisible = ref(false)

// form表单
const form = ref({
  name: ''
})
const formLabelWidth = '140px'
const ruleFormRef = ref()

// 校验规则
const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 3, max: 10, message: '部门名称长度为3-10', trigger: 'blur' },
  ]
})

// 取消按钮
const reset = async () => {
  form.value.name = ''
  dialogFormVisible.value = false
}

// 确认按钮
const submit = async () => {
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async valid => {
    if (valid) {
      let result = null
      if (form.value.id) {
        result = await updateDeptApi(form.value)
        // 如果响应的code=1  则表示修改成功
        if (result.code) {
          ElMessage({
            message: '部门修改成功',
            type: 'success',
          })
          query()
          form.value.name = ''
          dialogFormVisible.value = false
        } else {
          ElMessage({
            message: '添加修改失败',
            type: 'error',
          })
        }
      } else {
        // 添加操作
        result = await saveDeptApi(form.value)
        // 如果响应的code=1  则表示添加成功
        if (result.code) {
          ElMessage({
            message: '添加部门成功',
            type: 'success',
          })
          query()
          form.value.name = ''
          dialogFormVisible.value = false
        } else {
          ElMessage({
            message: '添加部门失败',
            type: 'error',
          })
        }
      }
    }
  })
}

// 编辑按钮
const handleEdit = async (row) => {
  titles.value = '编辑部门'
  form.value.name = ''
  dialogFormVisible.value = true
  const result = await queryByIdApi(row.id)
  form.value = result.data
}

// 删除按钮
const handleDelete = async (row) => {
  const result = await deleteByIdApi(row.id)
  if (result.code) {
    ElMessage({
      message: '部门删除成功',
      type: 'success',
    })
    query()
  } else {
    ElMessage({
      message: '添加删除失败',
      type: 'error',
    })
  }
}

// 查询
const query = async () => {
  const result = await queryAllApi()
  tableData.value = result.data
}
// 钩子函数
onMounted(async () => {
  query()
})
</script>

<template>
  <p>部门管理</p>
  <el-button type="primary" @click="add">新增部门</el-button>

  <el-dialog v-model="dialogFormVisible" :title="titles" width="500">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset()">取消</el-button>
        <el-button type="primary" @click="submit()">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-table :data="tableData" style="width: 100%" width="auto" >
    <el-table-column prop="id" label="序号"/>
    <el-table-column prop="name" label="部门名称"/>
    <el-table-column prop="updateTime" label="最后操作时间"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<style scope>
</style>